<template>
  <div class="home">
    <h1>
      新闻详情页
      <el-button @click="linkTo" type="primary" icon="el-icon-edit" circle></el-button>
      <el-button @click="handleDelete" type="danger" icon="el-icon-delete-solid" circle></el-button>
    </h1>
    <hr>
    <h2>{{ newData.title }}</h2>
    <p>{{ newData.desc ? newData.desc : '暂无数据' }}</p>
<!--    <div class="article" v-html="newData.detail"></div>-->
    <quill-editor
      disabled
      :content="newData.detail"
      :options="{modules: { toolbar: [] }}"
    />
  </div>
</template>

<script>

import axios from 'axios'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'AdminNewsShow',
  data() {
    return {
      ID: null,
      newData: {}
    }
  },
  components: {
    quillEditor
  },
  async created() {
    const { newsId } = this.$route.params
    this.ID = newsId

    try {
      const { data } = await axios({
        method: 'GET',
        url: `http://localhost:3000/news/${this.ID}`
      })
      this.newData = data
    } catch (e) {
      this.$notify.error({
        title: '错误',
        message: '网络错误请刷新重试！'
      });
    }
  },
  methods: {
    linkTo() {
      this.$router.push({
        name: 'admin-news-edit',
        params: {
          newsId: this.ID
        }
      })
    },
    handleDelete() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await axios({
            method: 'DELETE',
            url: `http://localhost:3000/news/${this.ID}`
          })

          this.$router.replace({
            name: 'admin-news'
          })

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } catch (e) {
          this.$message({
            type: 'error',
            message: '删除失败！'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
  }
}
</script>

<style lang="less">
.article {
  ul {
    list-style: square;
  }
}
</style>
